<template>
    <div>
        <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="username" label="姓名" width="180"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
            <el-table-column prop="role_name" label="角色"></el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background=""
            :current-page="1"
            :page-size="1"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
        =={{total}}=
    </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import { getUsers_api } from "@/api";
export default {
  data() {
    return {
      userInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      tableData2: [],
      total: 5
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    /* 获取用户数据 */
    async getUser() {
      const { data: res } = await getUsers_api(this.userInfo);
      console.log(res, 4444);
      this.tableData2 = res.data.users;
      this.total = Math.ceil(res.data.total/this.userInfo.pagesize);
    },

    /* 分页 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      this.userInfo.pagesize = val;
      this.getUser();
    },
    /* 
      
       userInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.userInfo.pagenum = val;
      this.getUser();
    }
  },
  mounted() {
    this.getUser();
  }
};
</script>